<template>
  <!-- <div class="deviceInfomation">
    <div class="deivceTop" style="position: fixed;top: 0;z-index: 110;">
      <organization
        class="changeDep"
        :selectDepartment="curDepartment"
        @department_select="handleDepartment">
      </organization>
      <div class="changeMore">
        <div class="scan"><span class="iconfont icon-shaixuan" @click="changeMore" style="font-size:20px;"></span></div>
        <div class="scan" @tap="scanAdd">
          <span style="font-size:20px;" class="iconfont">&#xe60a;</span>
        </div>
        <div @click="changeHome" class="changeHome">
          <span class="iconfont" style="font-size:17px;">&#xe607;</span>
        </div>
      </div>
      <div @click="backToHomepage" class="backHome">
        <span class="iconfont" style="font-size:17px;">&#xe668;</span>
      </div>
    </div>
    <div class="MoreDataP" v-if="showMore">
      <div class="deviceName">设备名称 <input type="text" placeholder="请输入设备名称" v-model="deviceNameChoose"></div>
      <div class="deviceCode">设备编号 <input type="text" placeholder="请输入设备编号" v-model="deviceCodeChoose"></div>
      <div>运行状态</div>
      <div class="runStatusBtn">
        <button type="button" v-for="(each, index) in runstatus" :class="{'active':ind === index, 'default':ind !== index}"  @click="changeBgc(index)">{{each}}</button>
      </div>
      <div class="BtnGroup">
        <div class="btn-reset" @click="reset">重置</div>
        <div class="btn-over"  @click="overBtn">完成</div>
      </div>
      <div class="mask" v-show="show3" @click="showVuePopup3(false)"></div>
    </div>
    <div class="deviceNum">共{{deviceNum}}条记录</div>
    <div class="table-title">
      <span>设备名称</span>
      <span>设备编号</span>
      <span @click="leapfrogSort('run', sort2)">运行状态 <font-awesome-icon :icon="['fa','sort']" size="lg" /></span>
      <span>设备状态</span>
    </div>
    <div class="dataContent" ref="dataContent">
      <div class="deviceTable">
        <mescroll-vue class="me_scroll" ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
          <x-table :cell-bordered="false" class="deviceData" v-if="deviceInfoShow">
              <tr v-for="(deviceInfo,index) in device" :key="index" @click="getIndex(deviceInfo)">
                <td>{{deviceInfo.deviceName}}</td>
                <td>{{deviceInfo.code}}</td>
                <td>{{deviceInfo.run ==1?'未监控':deviceInfo.run ==2?'运转':deviceInfo.run ==3?'停止':deviceInfo.run ==4?'故障':deviceInfo.run ==5?'离线':'-'}}</td>
                <td>{{deviceInfo.status == 1?'正常':deviceInfo.status == 2?'异常':'-'}}</td>
              </tr>
          </x-table>
          <x-table :cell-bordered="false" class="componentData" v-if="componentInfoShow">
            <thead>
              <tr>
                <th>部件名称</th>
                <th>部件编号</th>
                <th>库存数量</th>
                <th>安全库存</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(componentInfo,index) in component" :key="index">
                <td>{{componentInfo.componentName}}</td>
                <td>{{componentInfo.componentCode}}</td>
                <td>{{componentInfo.componentRun}}</td>
                <td>{{componentInfo.componentState}}</td>
              </tr>
            </tbody>
          </x-table>
        </mescroll-vue>
      </div>
    </div>
    <ic-footer></ic-footer>
  </div> -->
  <div class="deviceInfomation deviceDetailManage">
    <div class="componentTopInv">
      <div class="changeMore">
            <div class="navTitle" @click="backFun"><i class="el-icon-arrow-left icon"></i><span>{{navTitle}}</span></div>
            <div class="left">
              <div class="scan" :style="{transform: isAndriod?'translateY(1.5px)':'translateY(4px)'}">
                <!-- <span class="iconfont icon-shaixuan" @click="changeMore" style="font-size:20px;"></span> -->
                <iconSvg name="filter" w="19px" h="19px" @click.native="changeMore" ></iconSvg>
              </div>
            </div>
            <div class="right">
              <div @click="changeHome" class="scan" :style="{transform: isAndriod?'translateY(-3.6px)':'translateY(-2.2px)'}">
                <span class="iconfont" @click="changeHome" style="font-size:22px;">&#xe607;</span>
              </div>
              <div @click="backToHomepage"   v-focusable class="scan backToHomepage" :style="{transform: isAndriod?'translateY(-3.5px)':'translateY(-3.5px)','margin-right':'18px'}">
                <span class="iconfont" @click="backToHomepage" style="font-size:17px;"><iconSvg name="home" w="20" h="20" style="transform: translateY(-2px);" class="d_icon"></iconSvg></span>
              </div>
          </div>
        </div>
    </div>
    <div :class="showMore?'MoreDataP show':'MoreDataP hide'" ref="MoreDataP" @tap="removeFouce">
      <div class="MoreDataPInner">
      <!-- <div class="deviceName">设备名称 <input type="text" placeholder="请输入设备名称" v-model="deviceNameChoose"></div>
      <div class="deviceCode">设备编号 <input type="text" placeholder="请输入设备编号" v-model="deviceCodeChoose"></div> -->
      <div class="searchItem" @tap.stop>
        <div class="title">组织筛选</div>
        <div class="inner">
          <div class="curSelectItem" v-show="!isShowSelectRow" @tap="showSelectRow">
            <span class="iconfont">&#xe601;</span>{{curDepartment.departmentName}}
            <div :class="{select:true,and:isAndriod}"></div>
          </div>
          <tree-item
            v-show="isShowSelectRow"
            ref="treeItem"
            class="item"
            :item="treeData"
            @get_department="getDepartment"
            :selectDepartments="departmentSelect">
          </tree-item>
        </div>
      </div>
      <div class="searchItem">
        <div class="title">设备信息</div>
        <div class="inner">
          <input type="text" id="ipName" @tap.stop :placeholder="isInputName?'':inputNameTip" :class="isEmptyData?'emptyData':''" @blur="setTip('name')" @focus="resetColor('name')" v-model="deviceNameChoose" />
        </div>
        <div class="inner">
          <input type="text" id="ipNum" @tap.stop :placeholder="isInputNum?'':inputNumTip" :class="isEmptyData?'emptyData':''" @blur="setTip('num')" @focus="resetColor('num')" v-model="deviceCodeChoose" />
        </div>
      </div>
      <div :class="{searchItem:true,addP:isAndriod&&(isInputName||isInputNum),pb:true}">
        <div class="title" style="padding:0 8px;">运行状态</div>
        <div class="inner">
          <div class="runStatusBtn">
            <grid :cols="4" :show-lr-borders="false" :show-vertical-dividers="false">
              <grid-item v-for="(each, index) in runstatus" :key="index">
                <!-- <button type="button" mini :class="{'active':ind === index, 'default':ind !== index}"  @tap="changeBgc(index)">{{each}}</x-button> -->
                <div :class="{'active':ind === index, 'default':ind !== index,'btn':true}"  @tap="changeBgc(index)">
                  <span :class="{isAnd:isAndriod}">{{each}}</span>
                </div>
                <!-- <x-button type="button" mini :class="{'active':ind === index, 'default':ind !== index}"  @tap="changeBgc(index)">{{each}}</x-button> -->
              </grid-item>
            </grid>
          </div>
        </div>
      </div>

      <!-- <div class="mask" v-show="show3" @click="showVuePopup3(false)"></div> -->
      </div>
      <div :class="{BtnGroup:true,isAndriod:isAndriod&&(isInputName||isInputNum)}">
        <div :class="{'btn-reset':true,'active':isActiveResetBtn}" @tap="reset(false)">重置</div>
        <div :class="{'btn-over':true,'active':isActiveOkBtn}"  @tap="overBtn">确认</div>
      </div>
    </div>
    <ic-header></ic-header>
    <div class="dataContent" ref="dataContent">
      <div class="deviceTable">
        <mescroll-vue class="me_scroll" ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
          <x-table :cell-bordered="false" class="deviceData" v-if="deviceInfoShow">
              <tr v-for="(deviceInfo,index) in device" :key="index" @click="getIndex(deviceInfo,index)">
                <td>
                  <div class="card">
                    <div :class="{'active1':isShow1==index,'bg':true}">
                      <div class="header">
                        <div :class="{title:true,and:isAndriod}">名称：{{computedByteLen(deviceInfo.deviceName)>=maxLength?methodGetByteLen(deviceInfo.deviceName,maxLength-4):deviceInfo.deviceName}} <p :class="{more:true}" @click.stop v-if="computedByteLen(deviceInfo.deviceName)>=maxLength"><label @click="openMore(deviceInfo.deviceName)">更多</label></p></div>
                        <span :class="{
                          and:isAndriod,
                          wjk:deviceInfo.run ==1,
                          yz:deviceInfo.run ==2,
                          tz:deviceInfo.run ==3,
                          gz:deviceInfo.run ==4,
                          lx:deviceInfo.run ==5,
                        }">{{deviceInfo.run ==1?'未监控':deviceInfo.run ==2?'运转':deviceInfo.run ==3?'停止':deviceInfo.run ==4?'故障':deviceInfo.run ==5?'离线':'-'}}</span>
                      </div>
                      <div :class="{numberRow:true,and:isAndriod}">编号：{{deviceInfo.code}}</div>
                    </div>
                  </div>
                </td>
              </tr>
          </x-table>
          <div class="mescroll-empty" v-if="isEmpty">
              <img class="empty-icon" src="/static/img/zwlr-icon.png">
              <p class="empty-tip">暂无内容</p>
          </div>
        </mescroll-vue>
      </div>
    </div>
    <button class="ewm" @touchstart="handleTouchstart"  @touchmove.stop="move" @touchend="handleTouchend" @click="scanAdd">扫一扫</button>
    <confirm class="deviceDetailManage" v-model="confirmShow"
      :class="{and:isAndriod}"
      hide-on-blur
      @on-cancel="ifClose"
      confirm-text='取消'
      cancel-text='确认'
      :title="'提示'">
        <p style="text-align:center;">退出界面内容不会保存</p>
      </confirm>
  </div>
</template>
<script>
// import IcFooter from "../common/ic-footer"
import IcHeader from "../common/ic-header"
import DeviceSelected from "../common/device-selected-detail-device"
import { XTable, Grid, GridItem, XHeader,Checklist,AlertPlugin,Confirm,XButton} from 'vux'
import deviceMan2 from '../../assets/icon/deviceManage2.png';
import deviceMan1 from '../../assets/icon/device.png';
import deviceConfig2 from '../../assets/icon/deviceConfig2.png';
import deviceConfig1 from '../../assets/icon/deviceConfig.png';
import deviceAlarm1 from '../../assets/icon/alarm2.png';
import deviceAlarm2 from '../../assets/icon/deviceAlarm2.png';
import componentManage1 from '../../assets/icon/bese_compon.png';
import componentManage2 from '../../assets/icon/beseComponent.png';
import dataGenerate1 from '../../assets/icon/data_generate.png';
import dataGenerate2 from '../../assets/icon/dataGenerate.png';
import DeviceDao from '../../daos/device_dao'
import BScroll from "better-scroll";
import MescrollVue from "mescroll.js/mescroll.vue";
import Organization from "../common/organization";
import TreeItem from "../../components/common/tree-item.vue";
// import {Modal,Button,Icon} from 'iview'
let _this = null;

export default {
  data(){
    return {
      isActiveResetBtn:false,
      isActiveOkBtn:false,
      isShowSelectRow:true,
      isShowTree:true,
      isAndriod:false,
      isStaticBtns:false,
      isSelectData:false,
      confirmShow:false,
      inputNameTip:'输入设备名称',
      inputNumTip:'输入设备编号',
      isInputName:false,
      isInputNum:false,
      isShow1:-1,
      maxLength:24,
      navTitle:'设备管理',
      isEmpty:false,
      isEmptyData:false,
      departmentLevel:['0'],
      departmentSelect:{},
      curDepartment:{
        departmentName:'全企业',
        id:'0'
      },
      treeData:{},
      deviceManageImg:deviceMan1,
      deviceConfigImg:deviceConfig2,
      deviceAlarmImg:deviceAlarm2,
      componentManageImg:componentManage2,
      DataGenerateImg:dataGenerate2,
      headName:'设备管理',
      deviceInfoShow:true,
      componentInfoShow:false,
      //展示部门列表
      showDep: false,
      //部门列表数据
      departments: ['一级部门', '二级部门', '三级部门'],
      radioValue: ['一级部门'],
      checkDep: '一级部门',
      //展示部门更多筛选
      showMore: false,
      checkMore:'筛选',
      //设备列表数据
      device:[],
      deviceBak:[],
      deviceInfo:[],
      component:[],
      //设备参数详情
      deviceDetail: '',
      //扫码设备参数
      deviceComponent: {
          code: '',
          deviceName: ''
      },
      departmentDetail: '',
      showSearch: '',
      sort2: false,
      sortType: 'run',
      runstatus: ['全部', '未监控','运转', '停止', '故障', '离线'],
      ind: 0,
      show3: false,
      deviceNameChoose: '',
      deviceCodeChoose: '',
      departmentId:0,
      deviceNum:0,
      mescroll: null,
      mescrollDown: {
        use: true,
        warpClass: 'my-downwarp',
        htmlContent: '<p class="downwarp-progress mescroll-rotate"></p><p class="downwarp-tip">加载中...</p>',
        onMoving: this.onMoving,
        afterLoading: this.showTotalNum,
        offset: 60,
        textOutOffset: '松开刷新'
      },
      mescrollUp: {
        that: this,
        callback: this.upCallback,
        page: {
          num: 0,
          size: 20
        },
        htmlNodata: '<p class="upwarp-nodata">-- 暂无更多的数据 --</p>',
        noMoreSize: 5,
        toTop: {
          src: "./static/mescroll-totop.png",
          offset: 1000
        },
        isBounce:false,
      },
     changeStatus: this.$route.query.runStatus,
      departmentData:''
    }
  },
  components:{
    XButton,
    Confirm,
    AlertPlugin,
    XTable,
    Grid,
    GridItem,
    XHeader,
    Checklist,
    DeviceSelected,
    // IcFooter,
    BScroll,
    MescrollVue,
    Organization,
    IcHeader,
    TreeItem,
  },
  computed: {
    deviceMessage () {
      //如果在store里拿不到设备信息，就去本地储存拿，并写入store。
            if(!this.$store.state.deviceMessage){
                this.$store.commit('changeDeviceMessage',JSON.parse(localStorage.getItem('deviceMessage')));
            }
      return this.$store.state.deviceMessage;
    },
    user () {
      //如果在store里拿不到设备信息，就去本地储存拿，并写入store。
      if(!this.$store.state.user){
        this.$store.commit('saveUser',JSON.parse(localStorage.getItem('user')));
      }
      return this.$store.state.user;
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
      vm.isShow1 = -1;
    });
  },
  beforeRouteLeave(to, from, next) {
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
    next();
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  methods:{
    setScroll(){
      if(!this.Scroll){
        this.Scroll = new BScroll(this.$refs.MoreDataP,{ tap: true});
      }

      setTimeout(function() {
        let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    showSelectRow(){
      this.isShowSelectRow = true
    },
    removeFouce(){
      this.setScroll()
      document.getElementById('ipName').blur();
      document.getElementById('ipNum').blur();
      // alert('blur')
    },
    // 判断是否安卓手机
    isAndriodDevice() {
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
      return isAndroid
		},
    backFun(){
      this.showMore?this.changeMore():this.changeHome()
    },
    closeMore(){
      this.showMore = false
      this.navTitle='设备管理'
    },
    openMore(val){
      this.$vux.alert.show({
        title: '标题',
        content: val,
        onShow () {
        },
        onHide () {
        }
      })
    },
    methodGetByteLen(str, len) {
      // 如果字节的长度小于控制的长度，那么直接返回
      if (this.computedByteLen <= len) {
        return str
      }
      for (let i = Math.floor(len / 2); i < str.length; i++) {
        if (str.substr(0, i).replace(/[^\x00-\xff]/g, '01').length >= len) {
          // Math.floor(i / 2) * 这里是控制特殊情况的显示
          // 如 '一二aaa一二三四'，显示的结果就是 '一二aaa一...'
          return str.substr(0, Math.floor(i / 2) * 2) + '...'
        }
      }
    },
    // 获取字节的个数
    computedByteLen(val) {
      return val.replace(/[^\x00-\xff]/g, '01').length
    },
    setTip(name){
      this.setScroll()
      this.isStaticBtns = false
      setTimeout(() => {
        switch (name) {
        case 'name':
          this.isInputName = false
          break;
        case 'num':
          this.isInputNum = false
          break;
        default:
          break;
      }
      }, 300);
    },
    resetColor(name){
      this.setScroll()
      this.isStaticBtns = true
      this.isEmptyData = false
      switch (name) {
        case 'name':
          this.isInputName = true
          break;
        case 'num':
            this.isInputNum = true
            break;
        default:
          break;
      }
    },
    move(e){
      let odiv = e.targetTouches[0];        //获取目标元素
      e.preventDefault();
      //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      let top = odiv.clientY - odiv.target.offsetHeight / 2;
      let h = document.body.clientHeight
      let offsetBottom = h - odiv.clientY - odiv.target.offsetHeight/2;
      if (top <= 47) {
          top = 47
      } else if(offsetBottom <= 98) {
          return
      }
      //移动当前元素
      e.target.style.right = 16 + 'px';
      e.target.style.top = top + 'px';
    },
    handleTouchstart (e) { // 开始拖拽
      this.isbound = true
      this.isHidden = true
      let eleBody = document.getElementsByTagName('body')[0]
      eleBody.style.position = 'fixed'
      eleBody.style.width = '100vw'
      eleBody.style.height = '100vh'
      eleBody.style.top = 0
      eleBody.style.left = 0
    },
    handleTouchend (e) { // 拖拽结束
      e.target.style.right = 16 + 'px';
      this.isbound = false
      this.isHidden = false
      let eleBody = document.getElementsByTagName('body')[0]
      eleBody.style.position = 'relative'
      // eleBody.style.width = 'auto'
      // eleBody.style.height = 'auto'
      // eleBody.style.top = 'unset'
      // eleBody.style.left = 'unset'
    },
    showTotalNum(mescroll) {
      let dv = JSON.stringify(this.device.slice(0,20))
      let dvB = JSON.stringify(this.deviceBak.slice(0,20))
      let isNoUpdate = Object.is(dv,dvB)
      document.querySelector('.downwarp-content').style.display = 'none'
      let warp = document.getElementsByClassName('my-downwarp')[0]
      let totalBox = document.querySelector('.total_num_view')
      let p = document.createElement('p')
      if(this.isAndriod){
        p.setAttribute('class','total_num_view and');
      }else{
        p.setAttribute('class','total_num_view');
      }
      if(this.isSelectData){
          p.innerHTML =  this.device.length>0?'筛选成功':'无设备信息'
      }else if (this.isEquals) {
          p.innerHTML =  `没有更多了`
      } else {
          p.innerHTML =  isNoUpdate?'已是最新信息':`已为你加载${this.device.length}条信息`
      }
      if (totalBox == null) {
          warp.appendChild(p)
      } else {
          if (this.isEquals) {
              totalBox.innerHTML =  `没有更多了`
          } else if(this.isSelectData){
            totalBox.innerHTML = this.device.length>0?'筛选成功':'无设备信息'
          }else{
              totalBox.innerHTML = isNoUpdate?'已是最新信息':`已为你加载${this.device.length}条信息`
          }
          totalBox.style.display = 'block'
      }
      return 1500
    },
    onMoving(mescroll, rate, downHight ) {
      let totalBox = document.querySelector('.total_num_view')
      if (downHight > 0 && totalBox) {
          document.querySelector('.downwarp-content').style.display = 'block'
          totalBox.style.display = 'none'
      }
      if (mescroll.downProgressDom) {
          mescroll.downProgressDom.classList.remove('mescroll-rotate');

          var progress = 360 * rate;
          mescroll.downProgressDom.style.webkitTransform = 'rotate(' + progress + 'deg)';
          mescroll.downProgressDom.style.transform = 'rotate(' + progress + 'deg)';
      }
    },
    getDepartment: function(data){
        this.department = data;
        this.curDepartment = data;
        this.departmentId = data.id;
        setTimeout(() => {
          this.isShowSelectRow = false
        }, 100);
    },
    getDepartLevel: function(){
        this.$http(this.$API.getDepartmentStruct,{departmentId:this.curDepartment.id},true, false, true).then((data)=>{
            this.departmentLevel = data;
        })
    },
    // 获取组织成员架构
    getOrganization: function(){
        this.$http(this.$API.getMyOrganization,{},true, false, true).then((data)=>{
            this.treeData = data
        })
    },
    changeHome(){
      this.$router.push({name: 'manage'});
    },

    getDeviceNum: function(){
      if(this.ind.length == 0){
        this.ind == 0
      }
      let param = {
        departmentId: this.departmentId,
        deviceName:this.deviceNameChoose,
        deviceCode:this.deviceCodeChoose,
        runStatus:this.ind
      }
      this.$http(this.$API.getDeviceNum, param, true).then((res) => {
      if (res) {
        let deviceInfo = res.deviceInfo;
         // runStatus:1、未监控  2、运转 3、停止 4、故障 5、离线
        this.deviceNum = parseInt(deviceInfo[0].deviceNum)
                        + parseInt(deviceInfo[1].deviceNum)
                        + parseInt(deviceInfo[2].deviceNum)
                        + parseInt(deviceInfo[3].deviceNum)
                        + parseInt(deviceInfo[4].deviceNum);
      }
      });
    },
    deviceManage:function(){
      this.deviceInfoShow=true;
      this.componentInfoShow=false;
      this.deviceManageImg=deviceMan1;
      this.componentManageImg=componentManage2;
    },
    deviceConfig:function(){

    },
    deviceAlarm:function(){

    },
    componnetManage:function(){
      this.mescroll.triggerDownScroll();
      this.deviceInfoShow=false;
      this.componentInfoShow=true;
      this.deviceManageImg=deviceMan2;
      this.componentManageImg=componentManage1;
    },

    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },

    upCallback(page, mescroll) {
      if(this.ind == 0){
        this.ind = ''
      }
      let params ={}
      if(this.changeStatus && this.changeStatus!=''){
        params = {
          departmentId:this.departmentId,
          deviceName: this.deviceNameChoose,
          deviceCode: this.deviceCodeChoose,
          runStatus: this.changeStatus,
          pageNum: page.num,
          pageSize: page.size,
        };
      }else{
        params = {
          departmentId:this.departmentId,
          deviceName: this.deviceNameChoose,
          deviceCode: this.deviceCodeChoose,
          runStatus: this.ind,
          pageNum: page.num,
          pageSize: page.size,
        };
      }
      this.deviceBak = JSON.parse(JSON.stringify(this.device))
      this.$http(this.$API.getDeviceList, params, true).then(res => {
        if (res) {
          let data = res.content;
          this.isEmpty = data.length>0?false:true
          this.isEmptyData = data.length>0?false:true
          if (page.num === 1) {
            this.deviceInfo = [];
          }
          this.deviceInfo = this.deviceInfo.concat(data);
          this.device = this.deviceInfo;
          this.$nextTick(() => {
            mescroll.endSuccess(data.length, !res.last);
          });
        } else {
          this.mescroll.endErr();
        }
        this.changeStatus = ''
      });
      if(this.ind == ''){
        this.ind = 0
      }
    },

    loadDeviceList: function(){
      this.$http(this.$API.getUserInfo,{},true).then((res)=>{
          this.departmentId = res.department.id;
          var param =  {
              departmentId: this.departmentId,
              };
          DeviceDao.loadDevice(param,res=>{

          })
      })
    },
    //切换部门
    changeDep: function () {
      this.showDep = true;
      this.showMore = false;
    },
    //
    change (val, label) {
      if (this.checkDep != this.radioValue){
        if(val[0]){
          this.showDep = false;
        }
        this.checkDep = val[0];
      }
    },
    ifClose(){
      this.reset()
      this.showMore = false
      this.navTitle = '设备管理'
    },
    //展开更多
    changeMore () {
      if(this.showMore){
        if(this.deviceNameChoose.length>0||this.deviceCodeChoose.length>0){
          this.isSelectData = true
          this.confirmShow = true
          return
        }else{
          this.showMore = false;
          this.navTitle = '设备管理'
          this.showDep = false;
        }
      }else if(this.isSelectData){
        this.showMore = true;
      }else{
        this.showMore = true;
        this.reset(true)
        return
      }
    },
    //跳转到设备信息页面
    getIndex:function(index,idx){
      this.isShow1 = idx
      localStorage.setItem('deviceInfo',JSON.stringify(index))
      setTimeout(()=>{
        this.$router.push({
          name: 'deviceInfos',
          query:{
            deviceInfo: index
          }
        });
      },200)
    },
    handleDeviceDetail: function(deviceDetail){
        this.$store.commit('changeDeviceMessage',deviceDetail);
        // this.getDeviceDetail();
    },
    handleDepartment: function(departmentDetail){
      this.curDepartment = departmentDetail;
      this.departmentId = departmentDetail.id;
      this.mescroll.resetUpScroll(true);
      this.getDeviceNum();
      localStorage.setItem('curDepartment',JSON.stringify(departmentDetail))
    },

    reset: function(isActive){
      console.log(isActive)
      if(!isActive){
        this.isActiveResetBtn = true
      }
      setTimeout(() => {
        this.isActiveResetBtn = false
        this.deviceNameChoose = '';
        this.deviceCodeChoose = '';
        this.ind = 0;
        // this.department={}
        this.department={}
        this.isSelectData = false
        this.departmentId=0
        this.$refs.treeItem.isOpen = false
        this.$refs.treeItem.toggle(this.treeData)
        this.$refs.treeItem.clearCheck()
      }, 300);

      // this.$refs.treeItem.department = {}
    },
    overBtn: function () {
      this.isActiveOkBtn = true
      setTimeout(() => {
        this.isActiveOkBtn = false
        this.isSelectData = true;
        this.getDeviceNum();
        this.navTitle = '设备管理'
        setTimeout(() => {
          this.showMore = false;
        }, 300);
        this.mescroll.resetUpScroll(true);
      }, 300);
    },
    leapfrogSort(type, sorted) {
      if (sorted === false) {
        this.sort2 = true;
        this.sortType = type;
        this.device.sort(this.compare(type));
      }else{
        this.sort2 = false;
        this.sortType = type;
        this.device.sort(this.compare2(type));
      }
    },
    compare(attr) {
      return function(a,b){
         var x = a[attr];
         var y = b[attr];
         return ((x>y)?-1:(x<y)?1:0)
      }
    },
    compare2(attr) {
      return function(a,b){
         var x = a[attr];
         var y = b[attr];
         return ((x<y)?-1:(x>y)?1:0)
      }
    },
    changeBgc: function (index) {
      this.ind = index
    },
    showVuePopup3(flag) {
      if (flag === false){
        this.showMore = false;
      }
      this.show3 = flag;
    },

    getDeviceList: function(){
      this.$http(this.$API.getDeviceList, true).then((res) => {
        if (res) {
          this.deviceInfo = this.device = res;
          }
      });
    },

    //扫码添加
    scanAdd: function () {
      let strUrl = '';
      wx.ready(()=>{
          wx.scanQRCode({ // 微信扫一扫接口
          desc: 'scanQRCode desc',
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            //扫码之后返回设备信息，获取设备id，跳转对应页面
            strUrl = res.resultStr;
            let name="state";
            let reg = new RegExp('(^|&)' + name + '=([^&]*)(#|$)', 'i');
            let r = strUrl.substr(1).match(reg);
            let id = '';
            if (r != null) {
              id =  r[2].split("#")[0];
            }
            if(strUrl.indexOf(location.hostname) != -1){
              window.location.href = _this.url + '/#/operaionManage/spotCheck/componentCheck?deviceId=' + id;
            }else{
             this.$commom.alert('请输入正确的手机号码');;
            }
          }
        })
      }).catch((err)=>{
        console.log("err:===>",err)
      });
    },

    getDomin: function(){
      this.url = window.location.protocol +'//'+ window.location.host;
    },

  },
  created:function(){
    this.isAndriod = this.isAndriodDevice()
    _this = this;
    this.getDomin();
    this.getOrganization()
    let localUrl = location.href.split('#')[0];
    // 获取微信签名
    this.$http(this.$API.getWxSign,{url:encodeURIComponent(localUrl)}, true).then((res) => {
      if (res){
        wx.config({
          debug: false,
          appId: res.appId, // 必填,公众号的唯一标识
          timestamp: res.timestamp, // 必填,生成签名的时间戳
          nonceStr: res.nonceStr, // 必填,生成签名的随机串
          signature: res.signature, // 必填,签名
          jsApiList: ['scanQRCode',] // 必填,需要使用的JS接口列表
        });
          /* 处理失败验证 */
        wx.error(function (res) {
          console.log("res:====>",res);
        // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
        });
      }
    });

    if (this.$route.query.deviceNameChoose) {
     this.departmentDetail = this.$route.query.deviceNameChoose
    }
    if(this.$route.query.runStatus){
      this.ind = this.$route.query.runStatus
    }
    if(this.$route.query.runStatus&&this.$route.query.departmentId&&this.$route.query.departName){
      this.ind = this.$route.query.runStatus
      this.departmentData = {
        name:this.$route.query.departName,
        id:this.$route.query.departmentId
      }
    }else{
      this.departmentData=''
    }
    this.getDeviceNum();
  },

  mounted(){
    this.setScroll()
    this.$nextTick(() => {
      if (!this.Scroll) {
        // debugger
        this.Scroll = new BScroll(this.$refs.mescroll, {
          click: true,
          tap: true
        })
      } /* else {
        this.scroll.refresh()
      } */
    })
   /*  this.$nextTick(() => {
      this.Scroll = new BScroll(this.$refs.mescroll,{click: true, tap: true});
    }); */
    this.curDepartment ={
      departmentName:'全企业',
      id:'0'
    }
    if(this.departmentData){
       this.handleDepartment(this.departmentData)
    }else{
      this.departmentData=''
    }

  },
  watch: {
    selectDepartment: function(){
      this.curDepartment = this.selectDepartment;
      this.department = this.curDepartment;
      this.getDepartLevel();
    }
  },
}
</script>
<style lang="less" scoped>
  @import '../../styles/iconfont.css';
  .vux-popup-mask.vux-popup-show{
    top: 52% !important;
    z-index: unset !important;
  }

  // *{
    // -ms-touch-action: unset !important;
    // touch-action: unset !important;
  // }
  .ic-footer{
    z-index:50 !important;
  }
  .deviceInfomation{
    background: rgba(0,0,0,0.3);
    .changeMore{
      color:#fff;
      background: #22233f;
      z-index: 110;
      position: fixed;
      display: flex;
      width: 100%;
      height: 50px;
      padding: 0 !important;
      margin: 0 !important;
      margin-bottom: 5px !important;
      box-sizing: border-box;
      border-bottom: 1px solid #494a5f;
      div{
        flex:1;
      }
      .left,.right{
        // float: left;
        // width: 49.7%;
        height: 100%;
        padding: 0 !important;
        margin: 0 !important;
        .scan{
          // float: left;
          // margin-left: 30%;
          margin-top: 11px;
          display: inline-block;
        }
        .backToHomepage{
          margin-top: 11px !important;
        }
      }
      .left{
        text-align: center;
      }
      .right{
        text-align: right;
          .scan{
            margin-right: 10px;
            &:nth-child(1){
              position: relative;
              &::before{
                content: "";
                width: .026667rem;
                height: 9.9px;
                background: hsla(0,0%,100%,.4);
                position: absolute;
                top: calc(~'50% + 1px');
                left: -14px;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                border-left: 0.026667rem solid rgba(255, 255, 255, 0.1);
              }
            }
          }
      }
      .navTitle{
        white-space: nowrap;
        display: flex;
        text-align: center;
        color: #ffffff;
        span{
          font-size: 16px;
          display: inline-block;
          height: 50px;
          line-height: 50px;
        }
        .icon{
          font-size: 20px;
          margin-left:10px;
          display: inline-block;
          height: 50px;
          line-height: 50px;
          color: #ffffff;
        }
      }
      // .left{
        // width: 49.8% !important;
        // border-right: 1px solid #494a5f;
      // }
    }

    .deivceTop{
      display: flex;
      min-height: 50px;
      width: 100%;
      position: fixed;
      top: 0px;
      z-index: 110;
      display: flex;
      align-items: center;
      background: #22233f;
      border-bottom: 0.026667rem solid #494a5f;
      .navTitle,.changeMore,.backHome{
        flex: 1;
        color:#fff;
        // line-height: 40px;
        vertical-align: middle;
      }
      .backHome{
        text-align: right;
        font-size: 23px;
        span{
          margin-right: 10px;
        }
      }
      .changeDep{
        // width: 34%;
        height: 50px;
        font-size: 20px;
        padding: 0 0 0 10px;
        color: #ffffff;
      }
      // .backHome{
      //   // width: 10%;
      //   color:#fff;
      //   line-height: 40px;
      //   position: absolute;
      //   right:0px;
      //   // text-align: left;
      //   padding-top: 6px;
      //   padding-right: 15px;
      //   span{
      //     color:#fff;
      //     font-size:18px;
      //     position: relative;
      //     left: 8px;
      //     top:-3px;
      //   }
      // }
      // .scan{
        // margin-left: 20%;
      // }
      .changeHome{
        width:11%;
        float: right;
        position: fixed;
        top: 5px;
        right: 60px;
        color: #fff;
        .yunweiLogoBox{
          display:inline-block;
          width: 61px;
          margin-top: -1px;
          margin-right: 20px;
          .yunweiLogoIcon{
            width: 100%;
          }
        }
      }
       @media screen and (min-width:320px) and (max-width:320px){
        .yunweiLogoBox{
          margin-top: -1px !important;
        }
      }
      .changeMore{
          text-align: center;
          // width: 32%;
          height: 40px;
          font-size: 23px;
          line-height: 40px;
          text-align: center;
          color: #ffffff;
          // border-left: 1px solid rgba(204, 204, 204, 0.46);
          // border-right: 1px solid rgba(204, 204, 204, 0.46);
          span{
            font-size: 20px;
          }
      }
      div{
        // width: 20%;
        // float: left;
        // height: 50px;
        vertical-align: middle;
        img{
            width: 20px;
            height: 20px;
            padding: 20% 0;
        }
      }
  }
    .DepData{
        position: absolute;
        width: 100%;
        z-index: 99;
      }
    .DepDataStyle{
        height: 50px;
        width: 90%;
        margin: 0 5%;
        font-size: 20px;
        text-align: left;
        line-height: 50px;
        color: #ffffff;
        border-bottom: rgba(255,255,255,0.2) 1px solid;
        .selectImg{
          width: 30px;
          height: 30px;
          float: right;
          margin: 10px;
        }
      }
    .MoreDataP{
      background: #22233F;
      position: fixed;
      z-index: 1000;
      height: calc(~"100% - 50px");
      overflow: scroll;
      top: 50px;
      right: 0;
      left:0;
      bottom: 0;
      // padding-bottom: 45px;
      transition: transform 0.3s ease-in-out;
      transform: translateY(-120%);
      .MoreDataPInner{
        width: 100%;
        color: #ffffff;
        // height: calc(~"100% + 1px");
        // overflow: scroll;
        // -webkit-overflow-scrolling: touch;
      }
      &.show{
        transform: translateY(0);
      }
      &.hide{
        transform: translateY(-120%);
      }
      .weui-grids:before,.weui-grid:after{
        border:none;
      }
      .weui-grid:active{
        background: none !important;
      }
      .weui-grid{
        padding: 0 !important;
      }
      .searchItem{
        padding: 0 15px;
        margin-bottom: 10px;
        &.addP{
          padding-bottom: calc(~'100vh - 400px') !important;
        }
        &.pb{
          padding: 0 12px;
          padding-bottom: 50px;
          // .inner{
            // .runStatusBtn{
              // button{
              // }
            // }
          // }
        }
        .curSelectItem{
          line-height: 3em;
          background-color:#292A4D;
          position: relative;
          .iconfont{
            margin-right: 1.1em;
            margin-left: 0.3em;
            font-size: 14px;
          }
          .select{
            position: absolute;
            right: 42px;
            top: 15px;
            border-radius: 50%;
            width: 18px;
            height: 18px;
              display: inline-block;
              border-color: #456de6;
              background-color: #456de6;
              font-size: 14px;
              transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
              /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
              括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
              -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
            &.and:after{
              left: 5.3px;
              top: -0.2px;
            }
            &:after{
              content: "L";
              width: 18px;
              height: 18px;
              line-height: 18px;
              position: absolute;
              color: #fff;
              left: 6px;
              top: -1.2px;
            }
          }
          input{
            /* //在input的内容之后插入新内容 */
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            right:35px;
            content: "";
            display: inline-block;
            width: 18px !important;
            height: 18px;
            border-radius: 50%;
            text-align: center;
            line-height: 14px;
            font-size: 14px;
            color: #fff;
            border: 3px solid #ddd;
            background-color: #fff;
            box-sizing: border-box;
            /* 规定两个并排的带边框的框 */
            &:after{
              /* //在input的内容之后插入新内容 */
              position: absolute;
              top:50%;
              transform: translateY(-50%);
              right:0;
              content: "";
              display: inline-block;
              width: 18px;
              height: 18px;
              border-radius: 50%;
              text-align: center;
              line-height: 14px;
              font-size: 14px;
              color: #fff;
              border: 3px solid #ddd;
              background-color: #fff;
              box-sizing: border-box;
              /* 规定两个并排的带边框的框 */
            }
            &:checked:after{
              /* //在input的内容之后插入新内容 */
              /* 规定两个并排的带边框的框 */
              /* 选中之后的样子 */
              content: "L";
              transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
              /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
              括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
              -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
              border-color: #456de6;
              background-color: #456de6;
            }
          }
        }
        // .title{

        // }
        .inner{
          input[type="text"]{
            height: 3em !important;
            line-height: 3em !important;
            background: #292A4D;
            width: 100%;
            margin-bottom: 12px;
            padding: 0 8px;
            transition: background .3s ease-in-out;
            &:focus{
              background: #383A69;
            }
          }
        }
      }
      .deviceName{
        border-bottom: 1px solid rgba(255,255,255,0.2);
      }
      .deviceCode{
        border-bottom: 1px solid rgba(255,255,255,0.2);
      }
      div{
        font-size: 16px;
        line-height: 40px;
        input{
          text-align: left;
          color:rgba(255,255,255,1);
          font-size: 16px;
          &::-webkit-input-placeholder{
            color:rgba(255,255,255,.5);
            font-size: 14px;
            height: 3em !important;
            line-height: 3em !important;
          }
        }
      }
    }

  }

  .active{
    background-color: #3967DC;
    color: #fff;
    border: 1px solid #3967DC;
  }
  .default{
    background-color: #22233F;
    color: #456DE6;
    border: 1px solid #456DE6;
  }
  .runStatusBtn{
    text-align: center;
  }
  .runStatusBtn .btn{
    display: inline-block;
    font-size: 14px !important;
    border-radius: 3px;
    /*width: 84px;*/
    width: calc(~"100% - 8px") !important;
    margin-bottom: 10px;
    // height: auto !important;
    line-height: 30px !important;
    padding: 0;
    text-align: center;
    span{
      font-size: 12px;
      // background: red;
      position: relative;
      vertical-align: middle;
      &.isAnd{
        transform: translateY(5px);
        // color: yellow;
      }
    }
  }
  .runStatusBtn button:focus{outline: none}
  .mask {
      position: absolute;
      top: 97%;
      width: 100%;
      left: -10px;
      height: -webkit-fill-available;
      background-color: rgba(0, 0, 0, 0.3);
      transition: all 0.2s ease-in;
      z-index: 999;
  }

  .deviceData{
    width: 100%;
    table-layout:fixed;
    &::after{
      content: unset;
    }
  }

  .deviceData td{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    &::before{
      border-bottom: none;
    }
  }

  .deviceData .card{
    margin-bottom: 12px;
    text-align: left;
    padding: 0;
    .bg{
      background: #292A4D;
      border-radius: 4px;
      transition: .3s all ease-in-out;
      &.active1{
        background: #383A69;
      }
      .header{
        color: #fff;
        font-size: 17px;
        padding: 0 8px;
        line-height: 38px;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        .more{
          display: inline-block;
          color:#456DE6;
        }
        span{
          line-height: 40px;
          font-size: 15px;
          display: inline-block;
          position: absolute;
          top: 0;
          right: 8px;
          &.and{
            color: red;
            padding-top: 2.5px;
          }
          &.gz{
            color: #DD2306;
          }
          &.wjk{
            color: rgba(255, 255, 255, 0.6);
          }
          &.tz{
            color: #4FDBE5;
          }
          &.lx{
            color: #DD9710;
          }
          &.yz{
            color: #456DE6;
          }
        }
      }
      .title{
        line-height: 40px;
        &.and{
          padding-top: 3px;
        }
      }
      .numberRow{
        line-height: 38px;
        font-size: 16px;
        padding: 0 8px;
        color: rgba(255, 255, 255, 0.6);
        &.and{
          padding-top: 2.5px;
          padding-bottom: 0.5px;
        }
      }
    }
  }

  .componentData{
    width: 100%;
    table-layout:fixed;
  }

  .componentData td{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
.dataContent{
  .me_scroll {
    top: 120px;
  }
  .mescroll {
    position: fixed;
    padding: 0 10px;
    box-sizing: border-box;
    top: 120px;
    bottom: 0;
    height: auto;
    background-color: #22233f;
  }
}
  .deviceTable{
    transform:unset ! important;
  }
</style>
<style scoped lang="less">
  #app, .content{
    width: 100%!important;
    height: 100%!important;
  }

  .vux-button-group > a.vux-button-tab-item-first:after{
    color: #3967DC !important;
    border: unset;
  }
  .vux-button-group > a.vux-button-group-current{
    background: #3967DC !important;
  }
  .vux-button-group > a.vux-button-tab-item-middle:after{
    border: unset !important;
  }
  .vux-button-group > a.vux-button-tab-item-first:after{
    color: #3967DC !important;
    border: unset;
  }
  .vux-button-group > a.vux-button-tab-item-last:after{
    color: #3967DC !important;
    border: unset;
  }
  body{
    background-color: #22233f;
  }

  .deviceInfomation{
    margin:0 auto;
    height: 100%;
    width: 100%;
    background-color: #22233f;
  }

  .dataContent{
/*     padding-left: 10px;
    padding-right: 10px; */
    color:#fff;
    height: 79%;
    /* margin-top: 2.4rem; */
    overflow: hidden;
  }

  .dataContent .vux-table tr{display: flex;}
  .dataContent .vux-table tr>td{flex: 1;text-align: center}

  .menuBar{
    background-color:rgba(0,0, 0, 0.4);
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 999;
  }
  .menuBar .weui-grid__label{
    color:#fff;
  }
  .menuBar .weui-grids:before{
    border-top: none;
  }
  // .menuBar .weui-grid{
  // }

  .activeLine{
    background: unset!important;
  }
  .table-title{
    position: fixed;
    top: 80px;
    width: 100%;
    z-index: 99;
    color: #fff;
    height: 40px;
    line-height: 40px;
    background: #18182c;
    display: flex;
  }
  .table-title span{
    flex: 1;
    text-align: center;
  }


  .BtnGroup{
    position: absolute;
    display: flex;
    width: fit-content;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 44px !important;
    line-height: 44px !important;
    transition: 0.3s all;
    &.isAndriod{
      position: static !important;
    }
    div{
      text-align: center;
      height: 44px !important;
      border-top: 1px #3967DC solid;
    }
  }
  .btn-reset{
    flex: 1;
    background: #22233f;
    padding: 0 15px;
    // margin: 0!important;
    // height: 30px;
    // line-height: 30px!important;
    // border-bottom-left-radius: 15px;
    // border-top-left-radius: 15px;
    border-radius: 0;
    color: #456DE6;
    line-height: 44px !important;
    transition: 0.3s all;
    &.active{
      background: #456DE6;
      color: #fff;
    }
  }
  .btn-over{
    flex: 2;
    background: #3967DC;
    padding: 0 15px;
    color: #fff;
    // margin: 0!important;
    // height: 30px;
    // line-height: 30px!important;
    // border-bottom-right-radius: 15px;
    // border-top-right-radius: 15px;
    border-radius: 0;
    line-height: 44px !important;
    transition: 0.3s all;
    &.active{
      background: #6E92FF;
    }
  }
  table{
    width: 100%;
    table-layout:fixed;
  }

  table td{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .deviceNum{
    width: 100%;
    position: fixed;
    top: 50px;
    line-height: 30px;
    color: #fff;
    padding-left: 15px;
    background-color: #22233f;
  }
  .mescroll-empty{
    padding-top: 50px;
    .empty-icon{
        width: 64px;
        height: 64px;
        margin-left: 22px;
    }
    .empty-tip{
        color: #4F77C0;
    }
}
.navTitle{
    line-height: 46px;
    text-align: center;
    color: #ffffff;
    span{
      font-size: 14px;
      display: inline-block;
      height: 46px;
      line-height: 46px;
    }
}
.ewm{
  position: fixed;
  right: 16px;
  bottom: 116px;
  width: 44px;
  height: 44px;
  outline: none;
  border: none;
  border-radius: 50%;
  background:rgba(69,109,230,0.4);
  color: #fff;
  font-size: 11px;
  line-height: 44px;
  text-align: center;
  user-select: none;
  z-index: 99;
  &:active{
    background: rgba(69,109,230,0.6);
  }
}
</style>
<style lang="less">
.deviceDetailManage {

  .weui-dialog__ft{
    line-height: 40px !important;
  }
  .weui-dialog__bd p ,.weui-dialog__bd div{
    padding-top: 5px !important;
    min-height: 60px !important;
  }
  .my-downwarp .and{
    padding-top: 2px !important;
  }
  table {
      color: #fff!important;
      margin: 0 !important;
  }
  ::-webkit-input-placeholder
  {
      text-align: left !important;
  }
  .emptyData{
    color: #FA0000 !important;
  }
  .organization .header{
    width: 28%;
    padding: 17px 0;
  }
  .weui-dialog__btn_primary{
    background: #456DE6 !important;
    color: #fff !important;
    border-top: #456DE6 1px solid;
  }
  .and weui-dialog__btn .and .weui-dialog__btn_default{
    padding-bottom: 1.5px;
  }
  .and .weui-dialog__btn{
    padding-top: 3.3px !important;
    padding-bottom: 1px;
  }
  .and .weui-dialog__btn_primary{
    padding-top: 3.3px !important;
  }
  .weui-dialog__btn_default{
    border: none;
    border-top: #456DE6 1px solid;
    background: #E8E9ED !important;
    color: #456DE6 !important;
  }
  .weui-dialog__bd,.weui-dialog__hd{
    background: #E8E9ED !important;
  }
  .weui-dialog{
    background: #456DE6 !important;
  }
  .weui-dialog__btn_primary{
    background: #456DE6 !important;
    color: #fff !important;
  }
}
</style>

